<template>
  <demoBlock title="徽标提示" class="tabbar-demo">
    <vcu-tabbar v-model="active">
      <vcu-tabbar-item name="home" icon="home">首页</vcu-tabbar-item>
      <vcu-tabbar-item name="search" icon="search" dot>搜索</vcu-tabbar-item>
      <vcu-tabbar-item name="cart" icon="cart">购物车</vcu-tabbar-item>
      <vcu-tabbar-item name="settings" icon="settings" badge="20">设置</vcu-tabbar-item>
    </vcu-tabbar>
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref("home");
    return { active };
  },
});
</script>

<style lang="less">
.tabbar-demo {
  .vcu-tabbar {
    position: relative;
    padding-bottom: 0;
  }
}
</style>